<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登陆页面</title>
    <link rel="stylesheet" href="css/conmmon.css">
    <link rel="stylesheet" href="css/login.css">
    <script src="js/jquery.min.js"></script>
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/logo2.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <a href="blog_list.html">主页</a>
        <a href="reg.html">注册</a> 
        <a href="retrieve.html">找回密码</a>
        <!-- <a href="#">注销</a> -->
    </div>
    <!-- 版心 -->
    <div class="login-container">
        <!-- 中间的登陆框 -->
        <div class="login-dialog">
            <h3>登陆</h3>
            <div class="row">
                <span>用户名</span>
                <input type="text" id="username">
            </div>
            <div class="row">
                <span>密码</span>
                <input type="password" id="password">
            </div>
            <div class="row">
                <div class="col-6">
                    <input type="text" class="form-control" id="verifyCode" placeholder="请输入验证码" required="true">
                </div>
                
                <div class="col-6">
                    <img alt="点击图片刷新！" id="verify" src="/user/kaptcha" onclick="this.src='/user/kaptcha?d='+new Date()*1">
                </div>
                
            </div>              
            <div class="row">
                <button id="submit" onclick="mysub()">提交</button>
            </div>
            
               
            
        </div>
    </div>
    <script>
        
        function mysub(){
            // 1. 非空校验
            var username = jQuery("#username");
            var password = jQuery("#password");
            var verifyCode = jQuery("#verifyCode");
            if(username.val()==""){
                alert("请输入用户名！");
                username.focus();
                return;
            }
            if(password.val()==""){
                alert("请输入密码！");
                password.focus();
                return;
            }
            
            // 2. ajax 请求登录接口
            jQuery.ajax({
                url:"/user/login",
                type:"POST",
                data:{"username":username.val(),"password":password.val(),"verifyCode":verifyCode.val()},
                success:function(result){
                    if(result!=null && result.code==200 && result.data!=null){
                        // 登录成功
                        location.href = "myblog_list.html";
                    }else if(result!=null && result.code==-1 && result.data>=5){
                        alert("该账户因密码错误次数过多已被锁定，请联系管理员");
                    }else if(result!=null && result.code==-1 && result.data!=null){
                        var i = 5-result.data;
                        alert("密码错误！还有"+ i + "次机会");
                    }else{
                        alert("参数错误！请检查用户名和验证码是否正确");
                        verify.onclick();
                    }
                }

            });
        }
        
    </script>
</body>

</html>